import React, { useContext } from 'react'
import Store from './context'
import { CHANGE_DISPLAY } from './reducer'

const TodoFooter = () => {
    const { dispatch } = useContext(Store)
    const changeDisplayClick = e => {
        dispatch({
            type: CHANGE_DISPLAY,
            payload: e.target.dataset.display
        })
    }
    return (
        <div>
            <button data-display="all" onClick={changeDisplayClick}>
                全部
          </button>
        <button data-display="uncompleted" onClick={changeDisplayClick}>
                未完成
            </button>
            <button data-display="completed" onClick={changeDisplayClick}>
                已完成
          </button>
      </div>
    )
}
export default TodoFooter
